﻿<div class="navbar navbar-fixed-top" data-bind="with: appModel">
  <div class="navbar-inner">
    <div class="container">
      <!--<header>-->
      <button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="./">
        <img src="../../Content/images/logo48.png" /></a>
      <div style="height: 0px;" class="nav-collapse collapse">

        <form class="navbar-search pull-left">
          <!--Search-->
          <div class="navbar-search input-append">
            <input class="span2" type="text"
              id="searchFor" name="searchFor"
              data-bind="value: searchFor, returnKey: function () { $data.search(searchFor()); }, attr: { 'data-source': $data.autocomplete.all() }"
              data-provider="typeahead" data-items="8" />
            <div class="btn-group" data-bind="css: { open: tools.search() }">
              <button class="btn" type="button" title="Suchen" data-bind="click: function () { $data.search(searchFor()); }" tabindex="-1"><i class="icon-search"></i></button>
              <button class="btn dropdown-toggle" type="button"
                data-bind="click: tools.toggleSearch"
                title="Erweiterte Suche">
                Wann &amp; Wo<b class="caret"></b>
              </button>
              <!--advanced search-->
              <ul class="dropdown-menu" id="search-adv">

                <li class="nav-header">Wo</li>
                <li>
                  <div>
                    <label for="posStart">Ausgangspunkt</label>
                    <div class="input-prepend input-append">
                      <button class="btn" type="button" title="Aktuelle Position bestimmen" data-bind="click: getCurrentPosition">
                        <i class="icon-home"></i>
                        <!--<i class="icon-location-arrow"></i>-->
                      </button>
                      <input type="text" id="posStart" name="posStart" data-bind="value: start.text, returnKey: function () { $data.locate('start'); }" />
                      <button class="btn" type="button" title="Ausgangspunkt festlegen" data-bind="click: function () { $data.locate('start'); }"><i class="icon-map-marker"></i></button>
                    </div>
                    <div data-bind="visible: start.text">
                      <label for="posEnd">Ziel</label>
                      <div class="input-prepend input-append">
                        <button class="btn" type="button" title="Ziel entfernen" data-bind="click: function () { $data.locate('nothing'); }"><i class="icon-remove"></i></button>
                        <input type="text" id="posEnd" name="posEnd" data-bind="value: end.text, returnKey: function () { $data.locate('end'); }" />
                        <button class="btn" type="button" title="Ziel festlegen" data-bind="click: function () { $data.locate('end'); }"><i class="icon-map-marker"></i></button>
                      </div>
                    </div>
                  </div>
                </li>

                <li class="divider"></li>
                <li class="nav-header">Wann</li>
                <li>
                  <div class="input-append">
                    <input class="disabled" type="date" id="openDate" name="openDate" value="jetzt" />
                    <!-- data-bind="value: when" -->
                    <div class="btn-group">
                      <button class="btn disabled" type="button" title="Kalender öffnen"><i class="icon-calendar"></i></button>
                      <button class="btn disabled" type="button" title="Kalender öffnen"><i class="icon-time"></i></button>
                    </div>
                  </div>
                </li>

                <li class="divider"></li>
                <li class="nav-header">Wie</li>
                <!--  data-bind="visible: searchFor" -->
                <li>
                  <!--  data-bind="visible: searchFor" -->
                  <div>
                    <div id="options">
                      <!-- ko foreach: filterBy -->
                      <button class="btn btn-success btn-mini" data-bind="text: Name, css: { 'btn-success': Sel }, click: function () { $data.Sel(!$data.Sel()); $parent.filter(); }"></button>
                      <!-- /ko -->
                    </div>
                  </div>
                </li>

              </ul>
              <!--/advanced search-->
            </div>
          </div>

          <!--mode-->
          <div class="nav btn-group"><!--"car", "foot", "bicycle"-->
            <button class="btn" data-bind="click: function () { $data.setMode('foot'); }, css: { 'btn-success': $data.mode() === 'foot' }">Go</button>
            <button class="btn" data-bind="click: function () { $data.setMode('bicycle'); }, css: { 'btn-success': $data.mode() === 'bicycle' }">Bike</button>
            <!--          <button class="btn" data-bind="click: function () { $parent.setMode('transport'); }">Bus</button>-->
            <button class="btn" data-bind="click: function () { $data.setMode('car'); }, css: { 'btn-warning': $data.mode() === 'car' }">Drive</button>
          </div>

        </form>



        <ul class="nav pull-right">
          <!--View-->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ansicht<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <!-- ko foreach: views -->
              <li><a href="#" data-bind="text: Name, click: function () { $parent.setView($index()); }">x</a></li>
              <!-- /ko -->
              <li class="divider"></li>
              <li class="disabled"><a href="#">Region auswählen</a></li>
            </ul>
          </li>
          <!--My-->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meine<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#/shoppingList">Einkaufsliste</a></li>
              <li><a href="#">Lieblingsgeschäfte</a></li>
              <li><a href="#">Kundenkarten</a></li>
              <li class="divider"></li>
              <li><a href="#">Registrieren</a></li>
              <li><a href="#">Anmelden</a></li>
            </ul>
          </li>
          <!--About-->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Über<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <!--<li class="nav-header">das Projekt</li>-->
              <li><a href="#/about">Das Projekt</a></li>
              <!--<li><a href="#">Into Video</a></li>
              <li><a href="#">News / Blog</a></li>-->
              <li class="divider"></li>
              <!--<li><a href="#">Kontakt</a></li>-->
              <li><a href="#/impress">Impressum</a></li>
            </ul>
          </li>
          <!--Settings-->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Einstellungen"><i class="icon-cog"></i></a>
            <ul class="dropdown-menu">
              <li class="nav-header">Orte</li>
              <li><a href="#" data-bind="click: function () { $data.settings.clusterLocations(!$data.settings.clusterLocations()); $data.filter(); }">zusammenfassen <i class="icon-ok" data-bind="  visible: $data.settings.clusterLocations()"></i></a></li>
              <li class="divider"></li>
              <li class="nav-header">Ebenen</li>
              <li class="disabled"><a href="#">Öffentliche Verkehrsmittel</a></li>
              <li class="disabled"><a href="#">Radwege</a></li>
              <li class="divider"></li>
              <li class="nav-header">Kartenstil</li>
              <!-- ko foreach: settings.tileLayers -->
              <li><a href="#" data-bind="text: Name, click: function () { $parent.settings.setTileLayer($index()); }"></a></li>
              <!-- /ko -->
            </ul>
          </li>
        </ul>

        <!--<ul class="nav" data-bind="foreach: router.visibleRoutes">
            <li class="" data-bind="css: { active: isActive }">
              <a data-bind="attr: { href: hash }, text: name" href="#"></a>
            </li>
          </ul>-->

      </div>
      <!--</header>-->
    </div>
  </div>
</div>


<!--<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
  <div class="progress progress-striped active page-progress-bar">
    <div class="bar" style="width: 100px;"></div>
  </div>
</div>-->


